<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div1">
        这是一个div
    </div>
    <div id="div2">
        这是一个div2
    </div>
    <!-- <div id="div3" class="mycolor"></div> -->
    <div id="div4" class="mycolor">
        <p id="p1">ppp</p>
        <span id="sapn1">span内容</span>
    </div>
    <ul>
        <li>banana</li>
        <li>apple</li>
        <li>orange</li>
    </ul>

    <script>
        let div1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>12121212</p>"

        let myEle = document.createElement("h1")
        myEle.innerHTML = "787878"
        div1.appendChild(myEle)

        let div2 = document.querySelector("#div2")
        console.log(div2)

        let div3 = document.querySelector(".mycolor")
        console.log(div3)

        let divs = document.getElementsByTagName("div")
        console.log(divs)

        divs[1].appendChild(document.createTextNode("5656565"))

        let p1 = document.getElementById("p1")
        let myEle2 = document.createElement("h3")
        myEle2.innerHTML = "这是一个h3标题"
            // divs[3].insertBefore(myEle2, p1)

        p1.before(myEle2)
        let myEle3 = document.createElement("h4")
        myEle3.innerHTML = "这个是h4标题"
        p1.after(myEle3)

        // let span1 = document.getElementById("span1")
        // span1.remove()

        let list = document.getElementsByTagName("ul")

        // console.log(list)
        // console.log(list[0].firstElementChild.nextElementSibling)
        // list[0].children[0]

        // console.log(p1.parentElement)

        // div3.removeChild(p1)

        // document.querySelector("ul").children[1]
        let ul = document.querySelector('ul')
        ul.removeChild(ul.children[1])

        let items = document.querySelectorAll('ul li')
        items.forEach(item => {
            if (item.textContent.trim() === 'apple') {
                item.remove();
            }
        })
    </script>

</body>

</html>